<template>
  <n-tabs type="segment" class="lv2nav lv3nav" animated v-model:value="val.cktab">
    <n-tab-pane name="chap1" tab="搜索角色">
      <!-- 角色列表 -->
      <div class="nbox1 nbox2x">
        <n-flex justify="center" align="center">
          <n-button size="small" @click="ct.uppvpwork">上传作业</n-button>
          <n-input
            style="max-width: 370px"
            v-model:value="val.soname"
            type="text"
            size="small"
            placeholder="请输入角色名称"
          />
        </n-flex>

        <div style="margin-top: 12px"></div>

        <n-flex justify="center" align="center">
          <n-button @click="ct.search_work" style="width: 142px" type="warning" strong
            >搜索作业</n-button
          >
        </n-flex>
      </div>
      <div style="margin-top: 12px" v-if="val.team.length >= 1"></div>
      <div class="nbox1 nbox2x" v-if="val.team.length >= 1">
        <div>
          <n-space justify="center" align="center">
            <n-tag
              class="team_sstag"
              v-if="val.team.length >= 1"
              style="width: 65px"
              @click="ct.re_role"
            >
              <span>清空角色</span></n-tag
            >
            <template v-for="(item, key) in val.team">
              <n-popconfirm :show-icon="false">
                <template #trigger>
                  <div class="psr battle_psr">
                    <img class="ava" :src="$cfg.function.ava(item.icon)" />
                    <template v-if="key == 0">
                      <img class="capimg" :src="img_cap" />
                    </template>
                    <span class="battle_role_btmname btrsize">{{ item.bname[0] }}</span>
                  </div>
                </template>
                <template #action>
                  <div>
                    <span>[ {{ item.bname[0] }} ] 角色操作</span>
                    <n-hr />
                    <n-space>
                      <template v-if="key > 0">
                        <n-button size="small" type="info" @click="ct.exc_role(key)">
                          设置为队长
                        </n-button>
                      </template>
                      <n-button size="small" type="error" @click="ct.click_role(item)">
                        撤销角色
                      </n-button>
                    </n-space>
                  </div>
                </template>
              </n-popconfirm>
            </template>
          </n-space>
        </div>
      </div>
      <div style="margin-top: 12px"></div>
      <div class="nbox1 nbox2x">
        <n-flex justify="center" align="center">
          <n-flex>
            <n-tag class="team_sstag" style="width: 65px" @click="ct.swcapmode">
              <span
                ><template v-if="val.capmode == true">队长搜索</template
                ><template v-else>无序搜索</template></span
              ></n-tag
            >
            <n-tag
              class="team_sstag teamsstag_on"
              v-if="val.ssset != null"
              style="width: 65px"
              @click="val.ssset = null"
            >
              <span>清空筛选</span></n-tag
            >
          </n-flex>
        </n-flex>

        <div style="margin-top: 8px"></div>
        <n-space style="gap: 8px" justify="center" align="center">
          <template v-for="item in val.ss">
            <n-tag
              class="team_sstag"
              :class="{ teamsstag_on: val.ssset == item }"
              style="width: 50px"
              @click="val.ssset = item"
            >
              <i class="el-icon"
                ><img height="13" class="team_ss_icon" :src="val.img[item]"
              /></i>
              {{ item }}</n-tag
            >
          </template>
        </n-space>
        <div style="margin-top: 12px"></div>
        <div class="nbox2 nbox1x">
          <n-space justify="center" align="center" style="gap: 8px 8px">
            <template v-for="(item, key) in $cfg.role">
              <div
                class="psr battle_psr"
                @click="ct.click_role(item, key)"
                v-if="
                  !(val.starban.includes(item?.star) == true) &&
                  (val.ssset == null || val.ssset == item?.shu) &&
                  (`${item.name}${item.bname?.join(',')}`.includes(val.soname) ||
                    val.soname.length <= 0)
                "
              >
                <template v-if="val.team_icon.includes(item?.icon) == true">
                  <div class="ckanm2"></div>
                  <div class="ckanm1"></div>
                </template>

                <img class="ava" :src="$cfg.function.ava(item.icon)" />
              </div>
            </template>
          </n-space>
        </div>
      </div>
    </n-tab-pane>
    <n-tab-pane name="chap2" tab="热门队伍">
      <component :is="comp.pvp44_rank" :val="val" :ct="ct" :cfg="cfg" />
    </n-tab-pane>
    <n-tab-pane name="chap3" tab="搜索结果">
      <!-- 作业列表 -->
      <div class="nbox1 nbox2x">
        <template v-if="val.so == false"> 请在搜索角色界面搜索后使用 </template>
        <template v-if="val.so == true && val.worklist.length <= 0">
          <span style="padding-right: 10px"
            >找不到相关作业，如果进攻成功请帮助作业网上传作业。<br /><template
              v-if="val.capmode == true"
            >
            </template
          ></span>
          <n-hr />
          <n-space>
            <n-button type="warning" @click="ct.uppvpwork">快速上传作业</n-button>
          </n-space>
        </template>
        <template v-else>
          <p v-if="val.maxcount >= 1 && route.query.imgsv != 1">
            匹配到 ({{ val.maxcount }}) 条进攻队伍
          </p>

          <template v-for="item in val.worklist">
            <div class="team44_div">
              <div class="team44_div2">
                <!-- 进攻方 -->
                <div class="atk_team">
                  <div class="atkdefimgdiv">
                    <img :src="img_atk" class="atkimg" />
                    <span class="_tips">进攻</span>
                  </div>
                  <img class="capimg" :src="img_cap" />
                  <template v-for="item2 in item.data.atk">
                    <img class="ava" :src="$cfg.function.ava(item2)" />
                  </template>
                </div>
                <!-- 防守方 -->
                <div class="def_team">
                  <div class="atkdefimgdiv">
                    <img :src="img_def" class="atkimg" />
                    <span class="_tips">防守</span>
                  </div>
                  <img class="capimg" :src="img_defcap" />
                  <template v-for="item2 in item.data.def">
                    <img class="ava" :src="$cfg.function.ava(item2)" />
                  </template>
                </div>
              </div>
              <div class="team44_div3" v-if="route.query.imgsv != 1">
                <n-space>
                  <n-button size="small" @click="ct.gj_dw('gj', item)">
                    <i class="el-icon"
                      ><svg
                        width="36"
                        height="36"
                        viewBox="0 0 36 36"
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon"
                      >
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"
                        ></path></svg></i
                    ><span style="padding-left: 5px">{{ item.gj }}</span>
                  </n-button>
                  <n-button size="small" @click="ct.gj_dw('dw', item)">
                    <i class="el-icon" style="transform: rotate(180deg)"
                      ><svg
                        width="36"
                        height="36"
                        viewBox="0 0 36 36"
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon"
                      >
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"
                        ></path></svg></i
                    ><span style="padding-left: 5px">{{ item.dw ?? 0 }}</span>
                  </n-button>
                  <n-button size="small" @click="ct.get_ps(item)">
                    <span>站位</span>
                  </n-button>
                  <n-button size="small" @click="ct.get_eq(item)">
                    <span>装备</span>
                  </n-button>
                </n-space>
              </div>
            </div>
          </template>

          <n-grid :cols="1" style="margin-bottom: 12px" v-if="route.query.imgsv != 1">
            <n-gi>
              <n-button
                @click="ct.search_work_add"
                style="width: 100%"
                strong
                secondary
                v-if="val.maxpage >= 1"
                >{{ val.page }} / {{ val.maxpage }}　加载更多作业</n-button
              >
            </n-gi>
          </n-grid>
        </template>
      </div>
    </n-tab-pane>
  </n-tabs>
</template>
<script>
import img_atk from "@/assets/img/战士.png";
import img_def from "@/assets/img/坦克.png";
export default {
  props: {
    val: {
      required: true,
    },
    ct: {
      required: true,
    },
    comp: {
      required: true,
    },
    cfg: {
      required: true,
    },
    route: {
      required: true,
    },
  },
  setup() {
    return {
      img_atk,
      img_def,
    };
  },
};
</script>
